<template>
  <div class="scoreProgress">
    <div class="scoreProgress-col">
      <div class="scoreProgress-item">
        <circleProcess></circleProcess>
        <div class="scoreProgress-item-text">
          满分
        </div>
      </div>
    </div>
    <div class="scoreProgress-col">
      <div class="scoreProgress-item">
        <circleProcess :current="110" color="rgba(132, 230, 163, 1)"></circleProcess>
        <div class="scoreProgress-item-text">
          最高分
        </div>
      </div>
    </div>
    <div class="scoreProgress-col">
      <div class="scoreProgress-item">
        <circleProcess color="rgba(255, 84, 51, 1)"></circleProcess>
        <div class="scoreProgress-item-text">
          最低分
        </div>
      </div>
    </div>
    <div class="scoreProgress-col">
      <div class="scoreProgress-item">
        <circleProcess color="rgba(255, 201, 127, 1)"></circleProcess>
        <div class="scoreProgress-item-text">
         平均分
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import circleProcess from '../../components/circleProcess'

  export default {
    name: 'scoreProgress',
    data () {
      return {}
    },
    components: {
      circleProcess
    }
  }
</script>

<style scoped>
  .scoreProgress {
    width: 100%;
    display: flex;
  }

  .scoreProgress-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .scoreProgress-col::after {
    position: absolute;
    content: " ";
    height: 40rpx;
    width: 1px;
    background: rgba(218, 225, 230, 1);
    top: 30rpx;
    right: 0;
  }

  .scoreProgress-col:last-child::after {
    position: absolute;
    content: " ";
    height: 40rpx;
    width: 1px;
    background: #fff;
    top: 30rpx;
    right: 0;
  }

  .scoreProgress-item-img {
    width: 74rpx;
    height: 74rpx;
  }

  .scoreProgress-item-text {
    font-size: 24rpx;
    text-align: center;
    letter-spacing: 4rpx;
    color: rgba(145, 150, 153, 1);
  }
</style>
